<template>
  <div class="detail-container">
    <!-- 进度条 -->
    <div>
      <el-steps :active="formatStepStatus(order.orderStatus)" finish-status="success" align-center>
        <el-step title="提交订单" :description=order.createTime></el-step>
        <el-step title="支付订单" :description=order.payTime></el-step>
        <el-step title="平台发货" :description=order.deliverTime></el-step>
        <el-step title="确认收货" :description=order.takeoverTime></el-step>
        <el-step title="完成评价" :description=order.commentTime></el-step>
      </el-steps>
    </div>
    <!-- 操作 -->
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{order.orderStatus | formatStatus}}</span>
        <div class="operate-button-container" v-show="order.orderStatus===0">
          <el-button size="mini" @click="showUpdateTakeoverDialog">修改收货人信息</el-button>
          <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.orderStatus===1">
          <el-button size="mini" @click="showUpdateTakeoverDialog">修改收货人信息</el-button>
          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.orderStatus===2||order.orderStatus===3">
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.orderStatus===4">
          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
        </div>
      </div>
      <!-- 基本信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">订单编号</el-col>
          <el-col :span="8" class="table-cell-title">用户账号</el-col>
          <el-col :span="8" class="table-cell-title">支付方式</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{order.orderSn}}</el-col>
          <el-col :span="8" class="table-cell">{{order.user.account}}</el-col>
          <el-col :span="8" class="table-cell">{{order.payType | formatPayType}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">订单备注</el-col>
          <el-col :span="8" class="table-cell-title">物流公司</el-col>
          <el-col :span="8" class="table-cell-title">物流单号</el-col>

        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{order.orderCnotes | formatNull}}</el-col>
          <el-col :span="8" class="table-cell">{{order.logisticsCompany | formatNull}}</el-col>
          <el-col :span="8" class="table-cell">{{order.logisticsSn | formatNull}}</el-col>
        </el-row>
      </div>
      <!-- 收货人信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
          <el-col :span="6" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{order.takeoverName}}</el-col>
          <el-col :span="6" class="table-cell">{{order.takeoverPhone}}</el-col>
          <el-col :span="6" class="table-cell">{{order.takeoverZip}}</el-col>
          <el-col :span="6" class="table-cell">{{order | formatAddress}}</el-col>
        </el-row>
      </div>
      <!-- 商品信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="commodityItemTable"
        :data="commodityData"
        style="width: 100%;margin-top: 20px" border>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.commodityPhoto" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.commodityName}}</p>
            <!-- <p>品牌：{{scope.row.productBrand}}</p> -->
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180" align="center">
          <template slot-scope="scope">
            <p>￥{{scope.row.commodityPrice | number_format}}</p>
            <!-- <p>货号：{{scope.row.productSn}}</p> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="属性" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.productAttr | formatProductAttr}}
          </template>
        </el-table-column> -->
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.commodityNums}}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{scope.row.commodityTotalAmount | number_format}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 费用信息 -->
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">商品合计</el-col>
          <el-col :span="8" class="table-cell-title">运费</el-col>
          <el-col :span="8" class="table-cell-title">优惠券</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">￥{{order.commodityAmount | number_format}}</el-col>
          <el-col :span="8" class="table-cell">￥{{order.freightAmount | number_format}}</el-col>
          <el-col :span="8" class="table-cell">-￥{{order.coupon.amount  | number_format}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">折扣金额</el-col>
          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">-￥{{order.discountAmount | number_format}}</el-col>
          <el-col :span="8" class="table-cell">￥{{order.orderAmount | number_format}}</el-col>
          <el-col :span="8" class="table-cell">￥{{order.payAmount | number_format}}</el-col>
        </el-row>
      </div>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{order.payAmount | number_format}}</span>
      </div>
      
      <!-- 备注信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">备注信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">用户备注</el-col>
          <el-col :span="12" class="table-cell-title">管理员备注</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">{{order.orderCnotes}}</el-col>
          <el-col :span="12" class="table-cell">{{order.orderBnotes}}</el-col>
        </el-row>
      </div>

    </el-card>

    <!-- 收获地址修改 -->
    <el-dialog title="修改收货人信息"
               :visible.sync="takeoverDialogVisible"
               width="40%">
      <el-form :model="takeoverInfoForm"
               ref="takeoverInfoForm"
               label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input v-model="takeoverInfoForm.takeoverName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="takeoverInfoForm.takeoverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="takeoverInfoForm.takeoverZip" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <v-distpicker :province="takeoverInfoForm.takeoverProvince"
                        :city="takeoverInfoForm.takeoverCity"
                        :area="takeoverInfoForm.takeoverDistrict"
                        @selected="onSelectRegion">
          </v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="takeoverInfoForm.takeoverAddress" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="takeoverDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateTakeoverInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 关闭订单 -->
    <el-dialog title="关闭订单"
               :visible.sync="closeDialogVisible"
               width="20%">
      <span>是否确认关闭订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 备注订单 -->
    <el-dialog title="备注订单"
               :visible.sync="markOrderDialogVisible"
               width="40%">
      <el-form :model="markInfoForm"
               label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="markInfoForm.orderBnotes" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改费用信息 -->
    <el-dialog title="修改费用信息"
               :visible.sync="moneyDialogVisible"
               width="40%">
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">商品合计</el-col>
          <el-col :span="8" class="table-cell-title">运费</el-col>
          <el-col :span="8" class="table-cell-title">优惠券</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">￥{{order.commodityAmount}}</el-col>
          <el-col :span="8" class="table-cell">
            <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model.number="moneyInfoForm.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
          </el-col>
          <el-col :span="8" class="table-cell">-￥{{order.coupon.amount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">折扣金额</el-col>
          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">
            <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model.number="moneyInfoForm.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{order.commodityAmount+moneyInfoForm.freightAmount}}</span>
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{order.commodityAmount+moneyInfoForm.freightAmount-order.coupon.amount-moneyInfoForm.discountAmount}}</span>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="moneyDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {number_format} from '@/filters/money-filter'
import deImg from '../images/OPPO.jpg'

export default {
    data () {
        return {
            id: '',
            order: {},
            url: "/images/OPPO一加.jpg",
            defaultImg: deImg,
            commodityData: [],
            takeoverDialogVisible: false,
            closeDialogVisible: false,
            markOrderDialogVisible: false,
            moneyDialogVisible: false,
            takeoverInfoForm: {
              takeoverName: '',
              takeoverPhone: '',
              takeoverZip: '',
              takeoverProvince: '',
              takeoverCity: '',
              takeoverDistrict: '',
              takeoverAddress: ''
            },
            closeInfoForm: {
              orderBnotes: ''
            },
            markInfoForm: {
              orderBnotes: ''
            },
            moneyInfoForm: {
              freightAmount: '',
              discountAmount: ''
            }
        }
    },

    created () {
      this.id = this.$route.query.id;
      this.getOrder()
    },


    filters: {
      formatStatus(value) {
        if (value === 0) {
          return '待付款';
        } else if (value === 1) {
          return '待发货';
        } else if (value === 2) {
          return '待收货';
        } else if (value === 3) {
          return '已完成';
        } else if (value === 4) {
          return '已关闭';
        }
      },

      formatNull(value) {
        if (value===undefined||value===null||value==='') {
          return '暂无';
        } else {
          return value;
        }
      },

      formatPayType(value) {
        if (value === 1) {
          return '支付宝';
        } else if (value === 2) {
          return '微信';
        } else {
          return '未支付';
        }
      },

      formatAddress(order) {
        let str = order.takeoverProvince;
        if (order.takeoverCity != null) {
          str += "  " + order.takeoverCity;
        }
        str += "  " + order.takeoverDistrict;
        str += "  " + order.takeoverAddress;
        return str;
      },
    },

    methods: {
      getOrder() {
        this.$http({
        url: this.$http.adornUrl(`/order/order/info/${this.id}`),
        methods: 'get',
        params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code===0) {
            console.log("&&&&&&")
            console.log(data.order)
            this.order = data.order
            console.log(this.order.orderStatus)
            console.log(this.order.deliverTime)
          }
        })

        this.$http({
        url: this.$http.adornUrl('/order/commodity/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 10,
          'orderId': this.id
        })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.commodityData = data.page.list
            console.log(this.commodityData)

          } else {
            this.commodityData = []
          }
          this.dataListLoading = false
        })
      },

      formatStepStatus(value) {
        if (value === 0) {
          // 待付款
          return 1;
        } else if (value === 1) {
          // 待发货
          return 2;
        } else if (value === 2) {
          // 待收货
          return 3;
        } else if (value === 3) {
          return 4;
        }
        else {
          return 1;
        }
      }, 
    

      // 显示收货信息
      showUpdateTakeoverDialog() {
        this.takeoverDialogVisible = true;
        this.takeoverInfoForm={
          takeoverName: this.order.takeoverName,
          takeoverPhone: this.order.takeoverPhone,
          takeoverZip: this.order.takeoverZip,
          takeoverProvince: this.order.takeoverProvince,
          takeoverCity: this.order.takeoverCity,
          takeoverDistrict: this.order.takeoverDistrict,
          takeoverAddress: this.order.takeoverAddress
        }
      },
      onSelectRegion(data){
        this.takeoverInfoForm.takeoverProvince = data.province.value;
        this.takeoverInfoForm.takeoverCity = data.city.value;
        this.takeoverInfoForm.takeoverDistrict = data.area.value;
      },
      // 修改收货信息
      handleUpdateTakeoverInfo() {
        this.$confirm('是否要修改收货信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/order/order/update'),
            method: 'post',
            data: this.$http.adornData({
              'orderId': this.id,
              'takeoverName': this.takeoverInfoForm.takeoverName,
              'takeoverPhone': this.takeoverInfoForm.takeoverPhone,
              'takeoverZip': this.takeoverInfoForm.takeoverZip,
              'takeoverProvince': this.takeoverInfoForm.takeoverProvince,
              'takeoverCity': this.takeoverInfoForm.takeoverCity,
              'takeoverDistrict': this.takeoverInfoForm.takeoverDistrict,
              'takeoverAddress': this.takeoverInfoForm.takeoverAddress
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getOrder();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 800,
              })
              this.takeoverDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
        });
      },

      // 显示关闭订单
      showCloseOrderDialog() {
        this.closeDialogVisible = true;
        this.closeInfo.note = null;
        this.closeInfo.id = this.id;
      },
      // 关闭订单
      handleCloseOrder() {
        this.$http({
            url: this.$http.adornUrl('/order/order/update'),
            method: 'post',
            data: this.$http.adornData({
              'orderId': this.id,
              'orderStatus': 4
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getOrder();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 600,
              })
              this.closeDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
      },

      // 显示订单备注
      showMarkOrderDialog() {
        this.markOrderDialogVisible=true;
        this.markInfoForm.orderBnotes = this.order.orderBnotes
      },
      // 添加订单备注
      handleMarkOrder() {
        this.$http({
            url: this.$http.adornUrl('/order/order/update'),
            method: 'post',
            data: this.$http.adornData({
              'orderId': this.id,
              'orderBnotes': this.markInfoForm.orderBnotes
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getOrder();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 800,
              })
              this.markOrderDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
      },

      // 显示修改金额
      showUpdateMoneyDialog() {
        this.moneyDialogVisible = true;
        this.moneyInfoForm.discountAmount = this.order.discountAmount;
        this.moneyInfoForm.freightAmount = this.order.freightAmount
      },
      handleUpdateMoneyInfo() {
        this.$http({
            url: this.$http.adornUrl('/order/order/update'),
            method: 'post',
            data: this.$http.adornData({
              'orderId': this.id,
              'freightAmount': this.moneyInfoForm.freightAmount,
              'discountAmount': this.moneyInfoForm.discountAmount,
              'orderAmount': this.order.commodityAmount + this.moneyInfoForm.freightAmount,
              'payAmount': this.order.commodityAmount + this.moneyInfoForm.freightAmount - this.moneyInfoForm.discountAmount - this.order.coupon.amount
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getOrder();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 800,
              })
              this.moneyDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
      }
    }
}
</script>

<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

.table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>